<template>
  <div class='index-page'>
    <div class="header">
      <img :src="require('@/assets/logo.png')" alt="logo">
      <van-button icon="comment-o" type="primary" />
    </div>
    <div class="body">
      <banner-box :classInfo="classInfo"></banner-box>
      <div class="lesson container">
        <div class="container-header">
          <span class="title">视频课</span>
          <!-- eslint-disable-next-line  -->
          <span class="more" @click="$router.push({name: 'CourseView'})">更多></span>
        </div>
        <lesson-box></lesson-box>
      </div>
      <div class="course container">
        <div class="container-header">
          <span class="title">专栏</span>
          <!-- eslint-disable-next-line  -->
          <span class="more">分类查看></span>
        </div>
        <course-box></course-box>
      </div>
    </div>
    <tab-menu :index="0"></tab-menu>
  </div>
</template>

<script>
// import store from '@/store';
import TabMenu from '@/components/tabmenu.vue';
import BannerBox from './components/banner.vue';
import LessonBox from './components/lessonbox.vue';
import CourseBox from './components/coursebox.vue';

export default {
  name: 'IndexPage',
  components: {
    TabMenu, BannerBox, LessonBox, CourseBox,
  },
  data() {
    return {
      classInfo: [
        {
          id: 1,
          image: '/image/banner/banner1.png',
          title: '大厂直通私教班',
          brief: '百家名企享定向入职',
          points: [
            { id: 1, value: '大厂在职 P7+ 亲自带教' },
            { id: 2, value: '1V1 能力摸底  量化大厂差距' },
            { id: 3, value: '百家名企任你挑  优先定向入职' },
            { id: 4, value: '无Offer/未涨薪  保障费双倍退' },
          ],
        },
        {
          id: 2,
          image: '/image/banner/banner2.png',
          title: 'Java工程师 高薪学习路径',
          brief: '对标阿里 P7 技术能力，构建架构师 9 大技能',
          points: [
            { id: 1, value: '匹配大厂私教 助力高薪Offer' },
            { id: 2, value: '1000+ 核心技能点 精准突破' },
            { id: 3, value: '12大维度 锻造必备架构技能' },
            { id: 4, value: '优秀学员 可享名企定向内推' },
          ],
        },
        {
          id: 3,
          image: '/image/banner/banner3.png',
          title: 'Java 入门到精通学习路径',
          brief: '0 基础入行 Java 的绿色通道，精通核心技能',
          points: [
            { id: 1, value: 'V2.0 全新配置升级案例库' },
            { id: 2, value: '深度实战 4 类主流名企项目' },
            { id: 3, value: '前沿技术焊接完整知识脉络' },
            { id: 4, value: '打通就业闭环助力大厂 Offer' },
          ],
        },
      ],
    };
  },
  computed: {

  },
  methods: {

  },
};
</script>

<style lang='less' scoped>
.header {
  position: sticky;
  top: 0px;
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: white;
  z-index: 1;
}
.header .van-button {
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 50%;
  background-color: #F4F4F4;
  color: black;
}
.body {
  padding: 0 15px 50px;
  background-color: #F3F4F5;
  height: 1600px;
}
.container {
  margin: 15px 0;
}
.container-header{
  display: flex;
  justify-content: space-between;
}
.container-header .title{
  font-size: 18px;
  font-weight: 700;
}
.container-header .more{
  font-size: 12px;
  font-weight: 400;
  color: #999;
}

</style>
